<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<script type="text/javascript" src="../script/jquery.js"></script>
	<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script type="text/javascript" src="../script/vant.min.js"></script>
	<script type="text/javascript" src="../script/fastclick.js"></script>
	<script type="text/javascript" src="../script/base.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/local.css" />
	<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
	<link rel="stylesheet" href="../script/elementui/lib/theme-chalk/index.css?t=1">
	<link href="../script/elementui/vue-element-table.css" rel="stylesheet" />
	<script src="../script/elementui/lib/index.js?t=1"></script>
	<script src="../script/elementui/vue-element-bigdata-table.min.js?t=4"></script>
	<script type="text/javascript" src="../script/JSLINQ.js"></script>
	<script type="text/javascript" src="../script/ajaxFileUpload.js"></script>
	<style type="text/css">
		body {
			zoom: 0.9;
		}

		.img {
			width: 50px;
			height: 50px;
			line-height: 30px;
			text-align: center;
			border-radius: 25px;
			padding: 11px;
			position: relative;
			color: #fff;
			font-size: 28px;
		}

		.img-text {
			font-size: 14px;
			margin-top: 6px;
		}

		.tree {
			width: 180px;
			height: calc(100% - 90px);
			overflow-y: auto;
			font-size: 16px;
			box-shadow: 0 0px 12px #ebedf0;
			padding: 10px 0 10px 0;
			transition: all 0.4s;
			z-index: 999;
			padding-left: 5px;
		}

		.tree ul {
			padding-left: 14px;
			transition: all 0.4s;
			position: relative;
			/* overflow: hidden; */
		}

		.tree .tree-node {
			overflow: hidden;
			position: relative;
		}

		.tree ul li {
			position: relative;
		}

		.tree-row {
			position: relative;
		}

		.tree-row.on {
			color: #469ede;
		}

		.tree-row>* {
			vertical-align: middle;
		}

		.tree-row i {
			margin-left: -14px;
			transition: all 0.4s;
		}

		.tree-row span {
			margin-left: 4px;
		}

		.tree-row .tran {
			transform: rotate(90deg);
		}

		.van-grid-item__content {
			background: transparent;
		}

		.content {
			background: url(../image/index-bg.png) no-repeat;
			background-size: 100% 100%;
		}

		.user {
			padding: 30px 15px 20px 15px;
			font-size: 14px;
		}

		.user>* {
			vertical-align: middle;
		}

		.user img {
			width: 40px;
			margin-right: 8px;
		}

		.person {
			color: #ffb580;
			margin-left: 5px;
		}

		.module {
			padding: 8px 10px 0 10px;
		}

		.module:last-child {
			padding-bottom: 15px;
		}

		.module>div {
			background: #fff;
			padding: 8px;
			border-radius: 8px;
			overflow: hidden;
		}

		.img {
			width: 46px;
			height: 46px;
			line-height: 46px;
			text-align: center;
			border-radius: 23px;
			padding: 11px;
			position: relative;
			color: #fff;
			font-size: 28px;
		}

		.img img {
			height: 35px;
			vertical-align: middle;
		}

		.img-text {
			font-size: 12px;
			margin-top: 6px;
			text-align: center;
			height: 30px;
		}

		.label {
			font-size: 16px;
			line-height: 20px;
		}

		.label .squ {
			background: #1cae5e;
			width: 5px;
			height: 16px;
			display: inline-block;
			border-radius: 2px;
			margin-top: 2px;
			margin-right: 8px;
		}

		.van-swipe-item img {
			width: 100%;
			height: 200px;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="box">
			<van-nav-bar-main>
				<div slot="title">
					<span>主目录</span><span v-if="operator" @click="openBaseScreen('操作人员')"
						class="person">[{{operator.name}}]</span>
				</div>
				<div slot="right" @click="loginOut">
					<img src="../image/d.png" />
				</div>
			</van-nav-bar-main>
			<div class="content">
				<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item>
						<img src="../image/index_bg3.png" alt="">
					</van-swipe-item>
					<van-swipe-item>
						<img src="../image/index_bg2.png" alt="">
					</van-swipe-item>
				</van-swipe>
				<van-pull-refresh :disabled="loadingDisabled" v-model="refreshLoading" @refresh="onRefresh">
					<div class="content-refresh">


						<div class="module" v-for="role in roleList">
							<div>
								<div class="label flex-box">
									<div class="squ"></div>
									<div class="flex-main">{{role.TreeName}}</div>
								</div>
								<div>
									<van-grid :column-num="4" :border="false">
										<van-grid-item v-for="row in role.Node">

											<div class="img" @click="openWin(row)" style="position: relative;">
												<img :src="ip + row.PIC_PH"> </img>

												<div v-if='row.APFunName=="待审批"&&obj.num!=0' v-text='obj.num'
													style="background-color: red;border-radius: 50%;position: absolute;top: -10%;right: -10%;width: 30px;height: 30px;font-size: 14px;line-height: 30px;">
												</div>
											</div>
											<div class="img-text">{{row.APFunName}}</div>
										</van-grid-item>

									</van-grid>

								</div>
							</div>

						</div>


						<div class="module">
							<div>
								<div class="label flex-box">
									<div class="squ"></div>
									<div class="flex-main">系统设置</div>
								</div>
								<div>
									<van-grid :column-num="4" :border="false">
										<van-grid-item>
											<div class="img" @click="ChangePWD">
												<van-icon name="setting" color='#000'></van-icon>
											</div>
											<div class="img-text">修改密码</div>
										</van-grid-item>

									</van-grid>

								</div>
							</div>

						</div>


						<!-- <van-grid :column-num="4" :border="false">
							<van-grid-item v-for="row in roleList">
								<div class="img" style="background:#83bff6" @click="openWin(row)">
									<van-icon name="notes-o"></van-icon>
								</div>
								<div class="img-text">{{row.APFunName}}</div>
							</van-grid-item>
						</van-grid> -->
					</div>
				</van-pull-refresh>


				<!-- <van-notice-bar mode="link" @click="openBaseScreen('操作人员')" v-if="!operator">您尚未绑定操作人员,请点击绑定
				</van-notice-bar> -->

			</div>
		</div>

	</div>
</body>

<script type="text/javascript">
	var vm;
	apiready = function () {

		APP.exitApp();

		api.addEventListener({
			name: 'selectRow'
		}, function (ret, err) {
			var type = ret.value.type;
			var row = ret.value.row;
			if (type == '操作人员') {
				window.localStorage.setItem('operator', JSON.stringify(row));
				vm.operator = row;
			}
		})


		if (api.screenWidth < api.screenHeight) {
			api.setScreenOrientation({
				orientation: 'portrait_up'
			});
		}



		vm = new Vue({
			el: '#app',
			data: {
				obj: {
					num: ''
				},
				showLoading: false,
				loadingDisabled: false,
				refreshLoading: false,
				roleList: [],
				operator: '',
				curModel: '',
				ip: APP.serverIP(),
			},
			created: function () {
				var that = this;
				if (that.ip.indexOf('192.168') >= 0) {
					that.ip = "http://192.168.1.22:9003";
				}
				if (window.localStorage.getItem('operator')) {
					that.operator = JSON.parse(window.localStorage.getItem('operator'));
				}

				that.getUserRole();
				// that.addnum()

				// setInterval(() => {
				// 	that.addnum()
				// }, 30000);
			},
			methods: {
				// addnum() {
				// 	var that = this;

				// 	APP.ajax('PC_DCLDPN', {
				// 		UserID: APP.getUserInfo().UserID
				// 	}, function (res) {
				// 		// console.log('res', JSON.stringify(res))
				// 		that.obj.num = res.ds[0].DSP.toString()
				// 		vm.$forceUpdate()

				// 	})
				// },
				openBaseScreen: function (str) {
					var that = this;
					var obj;
					if (str == '操作人员') {
						obj = {
							allowClear: false,
							showSearch: true,
							searchKey: '',
							serverSearch: false,
							searchBy: ['name'],
							isPaging: false,
							type: str,
							cmd: 'app_getEmployeeList',
							param: {}

						}
					}
					api.openWin({
						name: 'baseScreen',
						url: 'tool/baseScreen.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: obj
					})
				},
				getUserRole: function () {
					var that = this;
					that.showLoading = true;
					APP.ajax('AP_GetUserNM', {
					}, function (res) {
						// console.log(JSON.stringify(ip + row.PIC_PH))
						// that.showLoading = false;
						// that.refreshLoading = false;
						// that.roleList = res.ds;

						that.showLoading = false;
						that.refreshLoading = false;
						var roleList = [];
						for (var i in res.ds) {
							var x = 0;
							for (var j in roleList) {
								if (res.ds[i].TreeName == roleList[j].TreeName) {
									x = 1;
									roleList[j].Node.push(res.ds[i]);
								}
							}
							if (x == 0) {
								roleList.push({
									TreeName: res.ds[i].TreeName,
									Node: [res.ds[i]]
								})
							}
						}
						that.roleList = roleList;
						console.log('roleList', JSON.stringify(roleList))
					})

				},
				openWin: function (row) {
					var that = this;
					var pageParam = {}
					if (row.Para) {
						var paraArray = row.Para.split(';');
						for (var i in paraArray) {
							var paraRowArray = paraArray[i].split('=');
							pageParam[paraRowArray[0]] = paraRowArray[1];
						}
					}
					console.log('historyData', JSON.stringify(pageParam))
					pageParam.titleName = row.APFunName;
					api.openWin({
						name: row.AP_Link,
						url: row.AP_Link + '.html',
						reload: true,
						slidBackEnabled: false,
						allowEdit: false,
						pageParam: pageParam
					})
					// api.toast({
					// 	msg: row.AP_Link
					// })
				},
				onRefresh: function () {
					var that = this;
					that.refreshLoading = true;
					that.getUserRole();
				},
				loginOut: function () {
					var that = this;
					that.$dialog.confirm({
						title: '提示',
						message: '是否退出当前账号?'
					}).then(function () {
						window.localStorage.removeItem('userInfo');
						api.sendEvent({
							name: 'clearLoginInfo'
						});
						api.closeToWin({
							name: 'root'
						});
					}).catch(function () {

					});
				},
				ChangePWD() { // 修改密码
					api.openWin({
						name: 'ChangePWD',
						url: './Setting/ChangePWD.html',
						reload: true,
						slidBackEnabled: false,
					})
				},
			}
		})
	};
</script>

</html>